<template>
	<view>
		<p class="withDrawInfo ">{{$t('提现佣金')+'：'+commission}}</p>
		<u-subsection :list="list" :current="current" @change="change"></u-subsection>
		<view>
			<div v-for="(item,index) in orderList" :key="index" class="item u-p-30">
				<h4> {{$t('订单号')+':' + item.ordernumber}}</h4>
				<u-tag :text="item.name" :type="['warning','success','info'][item.status]" size="mini"
					class="u-m-r-15 u-m-b-10 u-m-t-10" />
				<p class="u-font-xs">{{$t('下单人')+':'+item.user_name}}({{[$t('一级'),$t('二级'),$t('三级')][item.level-1]}}) <span
						class="u-m-l-15">{{$t('手机号')+':'+item.phone}}</span> </p>
				<p class="u-font-xs u-m-t5 u-m-b-5">{{$t('订单金额')+':' + item.total_price}}</p>
				<p class="u-font-xs"> {{$t('下单时间')+':' + item.addtime}}</p>
				<div class="right">
					<p class="commission"> {{item.commission}}</p>
					<p class="u-font-xs" :style="{color:$u.color['tipsColor']}">{{$t('佣金收益')}}</p>
				</div>
			</div>
		</view>
		<u-empty class="u-m-t-60" text="暂无数据" icon-size="240" mode="data" v-if="orderList.length===0"></u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: this.$t('全部')
					},
					{
						name: this.$t('待付款')
					},
					{
						name: this.$t('已付款')
					},
					{
						name: this.$t('完成')
					}
				],
				current: 0,
				commission: "0.00",
				orderList: {}
			}
		},
		onLoad() {
			this.getCommissionList()
		},

		methods: {
			getOrderStatus(item) {
				if (item.status == 0 && item.fh_status == 0 && item.order_status == 0) {
					return {
						name: this.$t('待付款'),
						status: 0
					}
				} else if (item.status == 1 && item.fh_status == 1 && item.order_status == 1) {
					return {
						name: this.$t('已完成'),
						status: 1
					}
				} else if (item.status == 1 && item.order_status == 0) {
					return {
						name: this.$t('已付款'),
						status: 0
					}
				} else {
					console.log()
				}

			},
			async change(e) {
				await (this.current = e)
				this.getCommissionList()
			},
			getCommissionList() {
				const data = {
					status: this.current + 1
				}
				this.$http.getCommissionList(data).then(res => {
					this.commission = res.data.commission
					this.orderList = res.data.order_list.data
					this.orderList.forEach((res, i) => {
						console.log(res);
						if (res.state == 0 && res.fh_status == 0 && res.order_status == 0) {
							this.orderList[i].name = this.$t('待付款');
							this.orderList[i].status = 0;
						} else if (res.state == 1 && res.fh_status == 1 && res.order_status == 1) {
							this.orderList[i].name = this.$t('已完成');
							this.orderList[i].status = 1;
							// return {name:'已完成',status:1}
						} else if (res.state == 1 && res.order_status == 0) {
							this.orderList[i].name = this.$t('已付款');
							this.orderList[i].status = 0;
							// return {name:'已付款',status:0}
						} else if (res.order_status == 2) {
							this.orderList[i].name = this.$t('已关闭');
							this.orderList[i].status = 0;
						} else {
							console.log()
						}
					})
					console.log(this.orderList);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "uview-ui/index.scss";

	.withDrawInfo {
		background-color: $u-type-error;
		color: #fff;
		padding: 20upx;
		font-weight: 600;
	}

	.item {
		background-color: #fff;
		margin-bottom: 4upx;
		position: relative;

		.right {
			position: absolute;
			text-align: center;
			right: 20upx;
			top: 50%;
			transform: translateY(-50%);

			.commission {
				font-size: 40upx;
				font-weight: 600;

			}

		}
	}
</style>
